﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="5.aspx.cs" Inherits="BaseWeb.JQuery.方法汇聚._5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="js/jquery-ui.js" type="text/javascript"></script>

    <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
        }
        .ItemRow
        {
            background-color: #CCCCCC;
        }
    </style>

    <script type="text/javascript">
        //加载事件
        $(function()
        {
            $("tbody").sortable({
                opacity: 0.8, //拖动的透明度
                revert: true, //缓冲效果 
                cursor: 'move', //拖动的时候鼠标样式
                connectWith: ".ItemRow",//允许拖动目标的样式
                //开始用update 结果执行两次，浪费资源，故改成stop
                //但是stop在元素没有改变位置的时候也会执行，
                //用update其他js会有问题，^_^
                stop: function(event, ui)
                {
                    var sourceObj = ui.item;
                    var targetObj = event.target.children;
                    //var sourceKeyId = ui.item.children()[0].innerText;
                    //var sourceName = ui.item.children()[1].innerText;
                    //var sourceObjMsg = "移动的源信息：" + sourceName + "(" + sourceKeyId + ")";
                    //debugger;
                    //var targetObj = event.target.children;
                    //for (var i = 1; i <= 7; i++)//0是表头，不要
                    //{
                    //var targetKeyId = targetObj[i].childNodes[0].innerText;
                    //var targetName = targetObj[i].childNodes[1].innerText;
                    //}
                    //alert(sourceObjMsg);
                }
            });
            $("tbody").disableSelection(); //因为他们要拖动，所以尽量设置他们的文字不能选择。
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" CellPadding="3" AutoGenerateColumns="False"
            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
            OnRowDataBound="GridView1_RowDataBound">
            <RowStyle ForeColor="#000066" />
            <Columns>
                <asp:TemplateField HeaderText="拖动排序">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="labKeyId" runat="server" Text='拖动'></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="KeyId">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="labKeyId" runat="server" Text='<%# Bind("KeyId") %>'></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Name" HeaderText="Name" />
            </Columns>
            <FooterStyle BackColor="White" ForeColor="#000066" />
            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
    </div>
    <div id="divTest">
        <div>
            sdf
        </div>
        <div>
            sdf2edsdd
        </div>
        <div>
            sdffdsfdsfsd
        </div>
    </div>
    </form>
</body>
</html>
